<template>
	<view class="wrap">
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码短信已发送至{{tell}}</view>
			<vcode-input ref="VcodeInput" @vcodeInput="vcodeInput">
			</vcode-input>
			<!-- <text :class="{ error: error }">验证码错误，请重新输入</text> -->
			<view class="captcha">
>
				<u-button :text="(second +'s')" @click="submit" :disabled="code.length !== 6">

				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxlength: 4,
				code: '',
				value: '',
				second: 60, //总时长
				show: false,
				// error: false,
				tell: '',
				showtell: '',
				againTell: '',
				timer: null
			};
		},

		computed: {},
		onLoad(options) {
			this.tell = options.tell
			this.againTell = options.tell
			// this.tell = this.tell.substr(0, 3) + '****' + this.tell.substr(7)
			this.showtell = options.tell
			// this.getCaptcha()
			this.timer = setInterval(() => {
				this.second--;
				if (this.second <= 0) {
					this.show = true;
					console.log('989', 989);
					this.$CGRouter.go(1)
					clearInterval(this.timer);
				}
			}, 1000);
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			// 收不到验证码选择时的选择
			noCaptcha() {
				this.show = false
				this.second = 60
				let againCode = {
					"mobile": this.againTell,
					"type": "mobilelogin"
				};
				// 验证码登录
				getCode(againCode).then(res => {
					console.log(res)
					let interval = setInterval(() => {
						this.second--;
						if (this.second <= 0) {
							this.show = true;
							if (this.value.lenth != 4) {
								this.error = true;
							}
							clearInterval(interval);
						}
					}, 1000);
				})
			},
			// 事件侦听
			vcodeInput(value) {
				this.code = value;
				if (this.code.length === 6) {
					// this.finish()
				}
			},
			// 输入完验证码最后一位执行
			async submit() {
				if (!this.code || this.code.length !== 6) return this.$dialog.toast('请输入验证码')
				const data = {
					username: this.tell,
					code: this.code,
					loginType: 'phone'
				}
				await this.$store.dispatch('login', data);
				this.$CGRouter.switchTab('/pages/index/index')
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.wrap {
		padding: 80rpx;
		padding-top: 126rpx;
	}

	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.title {
		font-size: 50rpx;
		color: #171717;
	}

	.key-input .tips {
		font-size: 24rpx;
		color: #787878;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {
		color: pink;
		font-size: 30rpx;
		margin: 0 auto;
		margin-top: 166rpx;
		width: 240rpx;

		.noCaptcha {
			display: block;
		}

		.regain {
			display: block;
		}
	}
</style>